<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="custom" tagdir="/WEB-INF/tags" %>
<html>
<head>
    <c:set var="contextPath" value="${pageContext.request.contextPath}"/>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>案件分派</title>
    <style>
        .modal-header {
            min-height: 16px;
            padding: 15px;
            border-bottom: 1px solid #e5e5e5;
        }

        .modal-title {
            font-size: 20px;
            color: #333;
        }

        .modal-title {
            margin: 0;
            line-height: 1.42857143;
        }

        h1, h2, h3, h4, h5 {
            font-family: 'LatoRegular', 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif;
        }

        .modal-header .close {
            margin-top: 4px;
        }

        .close:hover, .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
            opacity: .5;
        }

        button.close {
            padding: 0;
            background: 0 0;
            border: 0;
        }

        .close {
            float: right;
            font-size: 21px;
            font-weight: 700;
            line-height: 1;
            text-shadow: 0 1px 0 #fff;
        }

        h4 small {
            font-size: 75%;
            font-weight: 400;
            line-height: 1;
            color: #777;
        }

        .btn-success:hover, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
            background-color: #17a08c;
            border-color: #119380;
            color: #fff;
        }

        /*-------------------------------------------*/

        .modal-body {
            position: relative;
            padding: 15px;
        }

        .panel-title {
            font-size: 18px;
            color: #111111;
            margin-top: 0;
            margin-bottom: 0;
            color: inherit;
        }

        h4 {
            line-height: 24px;
            font-weight: 500;
        }

        .col-sm-12 {
            padding-left: 10px;
            padding-right: 10px;
            position: relative;
            min-height: 1px;
        }

        .btn-group > .btn:first-child {
            margin-left: 0;
        }

        .btn-group > .btn:hover {
            z-index: 2;
        }

        .btn-default:hover {
            background: #f7f7f7;
            border-color: #ccc;
            box-shadow: none;
            color: #333;
        }

        .btn-default {
            background: #e4e7ea;
            color: #636e7b;
        }

        .btn-group > .btn {
            position: relative;
        }

        .btn:hover {
            text-decoration: none;
        }

        .btn-primary {
            color: #fff;
            background-color: #428bca;
            border-color: #357ebd;
        }

        .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
            color: #fff;
            background-color: #3071a9;
            border-color: #285e8e;
        }

        .btn:hover, .btn:focus {
            text-decoration: none;
        }

        .btn-group, .btn-group-vertical {
            position: relative;
            display: inline-block;
            vertical-align: middle;
        }

        .deptItem, .employeeItem {
            margin: 3px 0;
        }

        .btn {
            border-radius: 3px;
            line-height: 21px;
            transition: all 0.2s ease-out 0s;
            padding: 9px 15px;
            display: inline-block;
            font-size: 14px;
            font-weight: 400;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
            -moz-user-select: none;
            background-image: none;
            border: 1px solid transparent;
        }

        code {
            font-size: 90%;
            color: #c7254e;
            border-radius: 2px;
            background: none;
            padding: 0;
            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
        }

        a:active, a:hover {
            outline: 0;
        }

        .btn-sm {
            padding: 5px 10px;
            font-size: 12px;
        }

        .pull-right {
            float: right !important;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .modal-footer {
            margin-top: 0;
            padding: 15px;
            text-align: center;
            border-top: 1px solid #e5e5e5;
            width: auto;
        }

        button {
            text-transform: none;
            overflow: visible;
            font: inherit;
        }

        * {
            box-sizing: border-box;
        }
    </style>
</head>
<body class="modal-content">
<form:form commandName="formDto" id="form">
    <form:hidden path="caseUuid"/>
    <input type="hidden" name="employeeUuid" id="employeeUuid">

    <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">
            案件分派<br>
            <small>带有<span>*</span> 标记的员工是该部门下具有分派权限的员工</small>
        </h4>
    </div>
    <div class="modal-body">
        <div class="form-group">
            <div class="col-sm-12">
                <div class="btn-group pull-right" role="group" style="margin-bottom: 0px;">
                    <c:if test="${not empty formDto.currentDept}">
                        <a href="#" class="btn btn-default btn-sm pull-right loadModal"
                           url="assignment?caseUuid=${formDto.caseUuid}&deptUuid=${formDto.currentDept.parentUuid}">返回</a>
                    </c:if>
                </div>
                <h4 class="panel-title">
                    <c:if test="${not empty formDto.currentDept}">
                        <code>${formDto.currentDept.name}</code>下级
                    </c:if>部门列表
                </h4>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-12">
                <c:forEach items="${formDto.deptList}" var="dept">
                    <button type="button" class="btn btn-primary deptItem loadModal"
                            url="assignment?caseUuid=${formDto.caseUuid}&deptUuid=${dept.uuid}">
                            ${dept.name}</button>
                </c:forEach>
            </div>
        </div>
        <c:if test="${not empty formDto.employeeList}">
            <div class="form-group">
                <div class="col-sm-12"><h4 class="panel-title"><code>${formDto.currentDept.name}</code>员工列表</h4></div>
            </div>

            <div class="form-group">
                <div class="col-sm-12">
                    <c:forEach items="${formDto.employeeList}" var="emp">
                        <button type="button" class="btn btn-primary employeeItem"
                                uuid="${emp.uuid}">
                            <c:if test="${emp.leader}"><span>*</span></c:if>
                                ${emp.name}
                        </button>
                    </c:forEach><br/>
                    <span class="error text-danger ErrorText"></span>
                </div>
            </div>
        </c:if>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary" style="width:100%" id="SubmitBtn">
            确定
        </button>
    </div>
</form:form>

<style type="text/css">
    .deptItem, .employeeItem {
        margin: 3px 0;
    }
</style>
<script src="${contextPath}/resources/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    $("#SubmitBtn").click(function () {
        var serialize = $("#form").serialize();
        $.ajax({
            url: 'assignment',
            data: serialize,
            type: 'post',
            cache: false,
            success: function (data) {
                if (data.state) {
                    self.location.href = "case_complete.htm";
                } else {
                    $(".ErrorText").html(data.msg).css("color", "red");
                }
            },
            error: function () {
                alert("失败");
            }
        });
    });
    $(".employeeItem").click(function () {
        $(this).siblings().removeClass("btn-success");
        $(this).addClass("btn-success");
        $("#employeeUuid").val($(this).attr("uuid"));
    });

    $("body").on("click", ".loadModal", function () {
        var url = $(this).attr("url");
        $(".modal-content").load(url);
    });
</script>
</body>
</html>
